/* 初始化样式
------------------------------- */
:root {
  --kld-color-white: #fff;
  --kld-color-black: #1d1d1d;
  --kld-color-gray: #dfe2e2;
  --kld-color-primary: #409eff;
  --kld-border-color: #f1f2f3;

  --kld-color-hover: #797e7e;
  --kld-color-hover-rgba: rgba(102, 105, 107);

  // 左侧菜单
  --kld-bg-menuMainColor: var(--kld-color-white) !important;
  --kld-bg-menuActiveColor: var(--kld-color-gray) !important;
  --kld-bg-menuHoverColor: var(--kld-color-gray) !important;

  --kld-text-menuMainColor: var(--kld-color-gray) !important;
  --kld-text-menuActiveColor: var(--kld-color-white) !important;
  --kld-text-menuHoverColor: var(--kld-color-white) !important;

  // 头部导航
  --kld-bg-headerBarColor: var(--kld-color-white) !important;

  // 头部右侧图标光标浮动
  --kld-color-user-hover: var(--kld-color-hover-rgba) !important;

  // 边框
  --kld-border-color-light: var(--kld-border-color) !important;

}

* {
  margin: 0;
  padding: 0;
  // padding 和 border 的值算在指定宽高内部的
  box-sizing: border-box;
  // 如 Dropdown 下拉菜单，隐藏点击会出现蓝色边框 */
  outline: none !important;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  // font-family: Inter, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Microsoft YaHei, 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: 'pingFangsc-Light', 'pingFang sc', 'sTHeitisc-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 13px;
}

.w100 {
  width: 100% !important;
}

.h100 {
  height: 100% !important;
}

.pointer {
  cursor: pointer;
}



/* flex 弹性布局
------------------------------- */
.flex {
  display: flex;
}

.flex-column {
  @extend .flex;
  flex-direction: column;
}

.flex-center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

.flex-row-center {
  display: flex;
  justify-content: center;
}

.flex-column-center {
  @extend .flex-column;
  align-items: center;
  justify-content: center;
}

.space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.space-between-column {
  @extend .flex-column;
  justify-content: space-between;
}


/* 宽度全局样式
------------------------------- */
@for $i from 101 through 500 {
  .w#{$i} {
    width: #{$i}px !important;
  }
}

/* 高度全局样式
------------------------------- */
@for $i from 101 through 500 {
  .h#{$i} {
    height: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }

  .mr#{$i} {
    margin-right: #{$i}px !important;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml#{$i} {
    margin-left: #{$i}px !important;
  }

  .mg#{$i} {
    margin: #{$i}px !important;
  }

  .pt#{$i} {
    padding-top: #{$i}px !important;
  }

  .pr#{$i} {
    padding-right: #{$i}px !important;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl#{$i} {
    padding-left: #{$i}px !important;
  }

  .pd#{$i} {
    padding: #{$i}px !important;
  }
}


/* 主布局样式
------------------------------- */
.layout-padding {
  // border: 1px solid var(--kld-border-color-light);
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layout-container {
  width: 100%;
  height: 100%;

  // 菜单展开时
  .layout-aside-menu-200 {
    width: 200px !important;
    transition: width .3s ease;
  }

  // 菜单收起时
  .layout-aside-menu-60 {
    width: 60px !important;
    transition: width .3s ease;
  }

  // 左侧菜单
  .layout-aside {
    background: var(--kld-bg-menuMainColor);
    height: inherit;
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    border-right: 1px solid var(--kld-border-color-light);

    .layout-logo {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-color-gray);
      font-size: 15px;
      cursor: pointer;

      .layout-logo-img {
        width: 26px;
      }

      span {
        display: inline-block;
        white-space: nowrap;
        margin-left: 5px;
        font-size: 13px;
      }
    }
  }

  // 右侧头部
  .layout-header {
    padding: 0 !important;
    height: auto !important;

    .layout-header-index {
      height: 50px;
      display: flex;
      align-items: center;
      color: var(--el-text-color-regular) !important;
      background: var(--kld-bg-headerBarColor);
      border-bottom: 1px solid var(--kld-border-color-light) !important;

      .layout-header-breadcrumb {
        display: flex;
        align-items: center;
        flex: 1;
        height: inherit;

        .el-breadcrumb__inner a {
          // 面包屑标题不加粗
          font-weight: normal;
        }

        .layout-header-expand-icon {
          font-size: 16px;
          margin: 0 10px;
          cursor: pointer;
        }
      }

      .layout-header-user {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;

        .user-dropdown-link {
          height: inherit;
          display: flex;
          align-items: center;
          white-space: nowrap;
        }

        .layout-header-user-icon {
          cursor: pointer;
          padding: 0 10px;
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;

          &:hover {
            background: var(--kld-color-user-hover);
          }
        }
      }
    }
  }

  // 右侧主区域
  .layout-main {
    padding: 0 !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .layout-main-warp {
      padding: 20px !important;
      width: 100%;
      height: 100%;
    }
  }
}

/* NavMenu 导航菜单
------------------------------- */
.el-menu {
  border-right: none !important;

  &.el-menu--collapse {
    // 展开菜单时平滑
    transition: width 0.3ms ease;
  }
}

.el-menu-item,
.el-sub-menu__title {
  color: var(--kld-text-menuMainColor);
}

.el-menu-item.is-active {
  color: var(--kld-text-menuActiveColor);
  background-color: var(--kld-bg-menuActiveColor);
}

.el-menu-item:hover {
  color: var(--kld-text-menuHoverColor);
  background-color: var(--kld-bg-menuHoverColor);
}

// 收缩后，鼠标放在多级菜单浮出窗口
.el-menu--vertical {
  background: var(--kld-bg-menuMainColor);
}

// 收缩后，一级菜单浮出窗口 el-popper
.el-popper.is-dark {
  color: var(--el-text-color-primary);
  background: var(--kld-bg-menuMainColor);
  border: 1px solid var(--kld-border-color);

  .el-popper__arrow:before {
    // 箭头
    background: var(--kld-bg-menuMainColor) !important;
    border: 1px solid var(--kld-border-color); //var(--next-border-color);
  }
}